<template>
  <div style="display: flex; justify-content: space-between; flex-wrap: wrap">
    <EchartsItemDetails
      title=""
      :row="2"
      ref="options1"
      :option="options1"
      echartId="second-1"
    />
    <EchartsItemDetails
      title=""
      :row="2"
      ref="options2"
      :option="options2"
      echartId="second-2"
    />
    <EchartsItemDetails
      title=""
      :row="2"
      ref="options3"
      :option="options3"
      echartId="second-3"
    />
    <EchartsItemDetails
      title=""
      :row="2"
      ref="options4"
      :option="options4"
      echartId="second-4"
    />
    <el-tabs v-model="activeName" @tab-click="changeTab" style="width: 100%">
      <el-tab-pane label="DNT" name="first">
        <el-radio-group v-model="radio" size="medium" @change="changeRadio">
          <el-radio-button label="0">平均数</el-radio-button>
          <el-radio-button label="1">中位数</el-radio-button>
        </el-radio-group>
        <EchartsItemDetails
          v-if="activeName === 'first' && show"
          style="margin-top: 16px"
          title=""
          :row="2"
          ref="options5"
          :option="options5"
          echartId="second-5"
        />
      </el-tab-pane>
      <el-tab-pane label="ONT" name="second">
        <el-radio-group v-model="radio" size="medium" @change="changeRadio">
          <el-radio-button label="0">平均数</el-radio-button>
          <el-radio-button label="1">中位数</el-radio-button>
        </el-radio-group>
        <EchartsItemDetails
          v-if="activeName === 'second' && show"
          style="margin-top: 16px"
          title=""
          :row="2"
          ref="options6"
          :option="options6"
          echartId="second-6"
      /></el-tab-pane>
    </el-tabs>
  </div>
</template>
<script>
import { queryDnt, queryOnt } from "@/api/quality/chart";
export default {
  data() {
    return {
      startTime: "",
      endTime: "",
      timeType: "0",
      options1: {
        title: {
          text: "静脉溶栓率",
          left: "center",
        },
        grid: {
          height: "200px",
        },
        xAxis: {
          type: "category",
          data: [],
        },
        yAxis: {
          type: "value",
        },
        series: [
          {
            data: [],
            type: "bar",
          },
        ],
      },
      options2: {
        title: {
          text: "数据对比",
          left: "center",
        },
        grid: {
          height: "200px",
        },
        legend: {
          top: "10%",
          data: ["静脉溶栓人数", "急救特征人数"],
        },
        xAxis: {
          type: "category",
          data: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"],
        },
        yAxis: {
          type: "value",
        },
        series: [
          {
            name: "静脉溶栓人数",
            data: [1, 3, 5, 3, 5, 1, 3],
            type: "line",
            smooth: true,
          },
          {
            name: "急救特征人数",
            data: [5, 3, 3, 2, 3, 1, 1],
            type: "line",
            smooth: true,
          },
        ],
      },
      options3: {
        title: {
          text: "DNT分布",
          left: "center",
        },
        grid: {
          height: "200px",
        },
        xAxis: {
          type: "category",
          data: [],
        },
        yAxis: {
          type: "value",
        },
        series: [],
      },
      options4: {
        title: {
          text: "siCH发生率",
          left: "center",
        },
        grid: {
          height: "200px",
        },
        xAxis: {
          type: "category",
          data: [],
        },
        yAxis: {
          type: "value",
        },
        series: [
          {
            name: "静脉溶栓人数",
            data: [],
            type: "line",
            smooth: true,
          },
        ],
      },
      activeName: "first",
      radio: "0",
      show: true, // 修改标题时,修改一下此字段, 可以让echarts图更新
      options5: {
        title: {
          text: "本院DNT平均数",
          left: "center",
        },
        grid: {
          height: "200px",
        },
        xAxis: {
          type: "category",
          data: [],
        },
        yAxis: {
          type: "value",
        },
        series: [
          {
            data: [],
            type: "line",
          },
        ],
      },
      options6: {
        title: {
          text: "本院ONT平均数",
          left: "center",
        },
        grid: {
          height: "200px",
        },
        xAxis: {
          type: "category",
          data: [],
        },
        yAxis: {
          type: "value",
        },
        series: [
          {
            data: [],
            type: "line",
          },
        ],
      },
    };
  },
  methods: {
    // 新数据变化, 刷新chart图表
    refresh(jmrsData) {
      const xAxisData = jmrsData.map((item) => {
        return this.$moment(item.time).format("yyyy-MM-dd");
      });
      const seriesData = jmrsData.map((item) => {
        return item.gailv;
      });
      this.options1.xAxis.data = [...xAxisData];
      this.options1.series[0].data = [...seriesData];
      this.$refs.options1.updateChart();
    },
    // 绘制DNT统计
    changeOptions3(data) {
      const xAxisData = data.map((item) => {
        return this.$moment(item.time).format("yyyy-MM-dd");
      });
      const series = [
        {
          data: data.map((item) => {
            return item.dy45;
          }),
          type: "bar",
        },
        {
          data: data.map((item) => {
            return item.dy60;
          }),
          type: "bar",
        },
        {
          data: data.map((item) => {
            return item.other;
          }),
          type: "bar",
        },
      ];
      this.options3.xAxis.data = [...xAxisData];
      this.options3.series = [...series];
      this.$refs.options3.updateChart();
    },
    // 绘制SICH统计
    changeOptions4(data) {
      const xAxisData = data.map((item) => {
        return this.$moment(item.time).format("yyyy-MM-dd");
      });
      const seriesData = data.map((item) => {
        return item.bfNum;
      });
      this.options4.xAxis.data = [...xAxisData];
      this.options4.series[0].data = [...seriesData];
      this.$refs.options4.updateChart();
    },
    // 修改 开始/结束时间 及 查询类型
    changeSearchVal(param) {
      this.startTime = param.startTime;
      this.endTime = param.endTime;
      this.timeType = param.timeType;
      this.changeDetail();
    },
    changeDetail() {
      const param = {
        endTime: this.endTime,
        startTime: this.startTime,
        timeType: this.timeType,
        type: this.radio,
      };
      if (this.activeName === "first") {
        queryDnt(param).then((res) => {
          const data = res.data;
          const xAxisData = data.map((item) => {
            return this.$moment(item.time).format("yyyy-MM-dd");
          });
          const seriesData = data.map((item) => {
            return item.num;
          });
          this.options5.xAxis.data = [...xAxisData];
          this.options5.series[0].data = [...seriesData];
          this.$refs.options5.updateChart();
        });
      } else if (this.activeName === "second") {
        queryOnt(param).then((res) => {
          const data = res.data;
          const xAxisData = data.map((item) => {
            return this.$moment(item.time).format("yyyy-MM-dd");
          });
          const seriesData = data.map((item) => {
            return item.num;
          });
          this.options6.xAxis.data = [...xAxisData];
          this.options6.series[0].data = [...seriesData];
          this.$refs.options6.updateChart();
        });
      }
    },
    changeRadio(value) {
      this.show = false;
      this.options5.title.text =
        "本院DNT" + (value == "0" ? "平均数" : "中位数");
      this.options6.title.text =
        "本院ONT" + (value == "0" ? "平均数" : "中位数");
      this.changeDetail();
      setTimeout(() => {
        this.show = true;
      });
    },
    changeTab(e) {
      this.changeDetail();
    },
  },
};
</script>
<style scoped></style>
